<template>
  <view ref="zhspin" :class="[customClass]" :style="[customCSSStyle]" class="flex relative flex-col">
    <view class="relative zIndex-1">
      <slot></slot>
    </view>
    <view
      v-if="loadingComputed"
      @click.stop="clickMask"
      class="absolute zIndex-10 flex-center blur"
      :class="[css_is_nvue ? '' : ' fulled-height   ']"
      :style="[
        css_is_nvue ? '' : { width: '100%' },
        { backgroundColor: bgColorComputed },
        css_is_nvue
          ? {
              width: (css_nvue_size[0] || props.fontSize) + 'px',
              height: (css_nvue_size[1] || props.fontSize) + 'px',
            }
          : '',
      ]"
    >
      <view :userInteractionEnabled="false" class="pa-10 flex-col flex-col-center-center">
        <tm-icon spin :fontSize="props.size" :dark="isDark" :color="_color" :followDark="followDark" :followTheme="props.followTheme" :name="props.icon"></tm-icon>
        <zh-text :followTheme="props.followTheme" :dark="isDark" :followDark="followDark" :color="_color" _class="mt-16" :label="props.tip"></zh-text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
/**
 * 局部加载
 * @description 放置在其里面的所有内容，加载状态时，会在其中所有内容上添加遮罩模糊加载页面，并且不可操作。
 */

import { getCurrentInstance, computed, ref, provide, inject, onMounted, onUnmounted, onUpdated, nextTick, watch } from 'vue';
import { cssstyle, systemConfigState } from '@/tool/lib/interface';
import { custom_props, computedTheme, computedClass, computedStyle, computedDark } from '@/tool/lib/minxs';

import systemConfigStore from '@/store/modules/systemConfigStore';
const store = systemConfigStore();

// #ifdef APP-PLUS-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
// 混淆props共有参数
const props = defineProps({
  ...custom_props,
  followTheme: {
    type: [Boolean, String],
    default: true,
  },
  color: {
    type: String,
    default: 'primary',
  },
  icon: {
    type: String,
    default: 'tmicon-shuaxin',
  },
  size: {
    type: Number,
    default: 46,
  },
  bgColor: {
    type: String,
    default: 'rgba(255,255,255,0.9)',
  },
  tip: {
    type: [String],
    defalut: '',
  },
  load: {
    type: [Boolean, String],
    default: false,
  },
});
const emits = defineEmits(['click']);
const proxy = getCurrentInstance()?.proxy ?? null;
// 设置响应式全局组件库配置表。
const tmcfg = computed<systemConfigState>(() => store);
//自定义样式：
const customCSSStyle = computed(() => computedStyle(props));
//自定类
const customClass = computed(() => computedClass(props));
//是否暗黑模式。
const isDark = computed(() => computedDark(props, tmcfg.value));
//计算主题
// const tmcomputed = computed<cssstyle>(() => computedTheme(props, isDark.value));
// 点击文字事件。
function clickhandle(e: Event): void {
  emits('click', e);
}
const css_is_nvue = ref(true);
// #ifndef APP-NVUE
css_is_nvue.value = false;
// #endif
const css_nvue_size = ref([0, 0]);
const bgColorComputed = computed(() => (isDark.value ? 'rgba(0,0,0,0.9)' : props.bgColor));
const loadingComputed = computed(() => props.load);
const _color = computed(() => props.color);
onUpdated(() => {
  // #ifdef APP-PLUS-NVUE
  nvuegetClientRect();
  // #endif
});
onMounted(() => {
  // #ifdef APP-PLUS-NVUE
  nvuegetClientRect();
  // #endif
});
function nvuegetClientRect() {
  // #ifdef APP-PLUS-NVUE
  nextTick(function () {
    dom.getComponentRect(proxy.$refs.zhspin, function (res) {
      if (res?.size) {
        css_nvue_size.value = [res.size.width, res.size.height];
        if (res.size.height == 0) {
          nvuegetClientRect();
        }
      }
    });
  });
  // #endif
}
function clickMask(e) {
  // #ifdef APP-PLUS-NVUE
  e.stopPropagation();
  // #endif
  emits('click', e);
}
</script>

<style></style>
